<template>
	<view class="ContentShopping">
		<!-- 购物车商品 -->
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="toBottom">
			<view class="cs-item"  v-for="(item,index) in cartList" :key="index">
				<view class="item-icon" @click="showIcon(index)">
					<u-icon name="checkmark-circle" color="#b7b8b8" v-if="!item.checked" size="50" ></u-icon>
					<u-icon name="checkmark-circle-fill" color="#0C34BA" size="50" v-else="item.checked"></u-icon>
				</view>
				<view class="item-img">
					<image :src="item.small_img" mode="widthFix"></image>
				</view>
				<view class="item-desc">
					<view class="item-name">
						{{item.name}}
						<view class="item-type">{{item.rule}}</view>
					</view>
					<view class="item-enname">
						{{item.enname}}
					</view>
					<view class="item-price">
						¥{{item.price}}
						<view class="item-count">
							<button type="default" class="countBtn" @click="reduce(index)">-</button>
							<view class="count-num">{{item.count}}</view>
							<button type="default" class="countBtn" @click="add(index)">+</button>
						</view>
					</view>
				</view>	
			</view>
			<view class="to-bottom" v-show="isBottomText">哎呀，没有数据可以加载了！</view>
		</scroll-view> 
		<!-- 购物车底部栏 -->
		<view class="bottom-shopping">
			<view class="bottom-shoppingMsg">
				<view class="bottom-item-icon" @click="AllSelect()">
					<u-icon name="checkmark-circle" color="#b7b8b8" size="50" v-if="!isSelectAll"></u-icon>
					<u-icon name="checkmark-circle-fill" color="#0C34BA" size="50" v-else="isSelectAll"></u-icon>
					<view class="all-sleect">全选</view>
				</view>
				
				<view class="all-price" v-show="delBtn">
					合计：￥<view class="all-price-num">{{ totalPrice }}</view>.00
				</view>
			</view>
			<u-button hover-class="none" shape="circle" :custom-style="commitMall" @click="submitOrder" v-if="delBtn">提交订单</u-button>
			<u-button hover-class="none" shape="circle" :custom-style="deleteMall" @click="emitDeleteMall" v-else>删除选择</u-button>
		</view>
	</view>
</template>

<script>	
	import { formatDate } from "common/utils.js";

	export default{
		props:{
			cartList:Array,
			delBtn:Boolean
		},
		// mounted(){
		// 		this.cartList.forEach((element) => {
		// 		  element.checked = true;
		// 		});
		// },
		data() {
			return {
				isBottomText:false,
				commitMall:{
					width: "30%",
					color: "#FFFFFF",
					fontSize: "30rpx",
					backgroundColor:"#0C34BA"
				},
				deleteMall:{
					width: "30%",
					color: "#FFFFFF",
					fontSize: "30rpx",
					backgroundColor:"#EE0A24"
				}
			}
		},
		computed:{
			totalPrice() {
			      return this.cartList
			        .filter((item) => {
			          return item.checked;
			        })
			        .reduce((preV, item) => {
			          return preV + item.count * item.price;
			        }, 0)
			        .toFixed(0);
			 },
			 isSelectAll() {
			       if (this.cartList.length === 0) return false;
			       return this.cartList.find((item) => item.checked === false) === undefined;
			       // this.cartList.find((item) => !item.checked);
			 },
		},
		methods:{
			reduce(index){
				if(this.cartList[index].count>1){
					this.cartList[index].count--
					this._refreshCount(index)
				}
			},
			add(index){
				this.cartList[index].count++
				this._refreshCount(index)
			},
			showIcon(index){
				this.$set(this.cartList[index],"checked",!this.cartList[index].checked)
			},
			toBottom(){
				this.isBottomText = true
			},
			_refreshCount(index){
				this.$u.debounce(()=>{
					this.$emit("refreshCount",this.cartList[index])
				}, 700)
			},
			AllSelect(){
				//判断购物车商品是否有未被选择的
				let deSelect = this.cartList.find((item) => !item.checked);
				//如果有，则选中
				if (deSelect) {
				  this.cartList.forEach((element) => {
				    element.checked = true;
				  });
				} else {
				  this.cartList.forEach((element) => {
				    element.checked = false;
				  });
				}
				this.isAllSelectss = !this.isAllSelectss
			},
			// 删除数据库中的用户购物车商品
			emitDeleteMall(){
				let sids =  this.selectMall()
				// this.cartList = this.cartList.forEach((e,index)=>{
				// 	if(e.checked){
				// 	this.cartList.splice(index,1)
				// 	}
				// })
				this.$emit("deleteMall",sids)
			},
			// 判断选中哪些商品
			selectMall(){
				let sids = [] 
				this.cartList.forEach(e=>{
					if(e.checked){
						sids.push(e.sid)
					}
				})
				return sids
			},
			submitOrder(){
				let date = new Date() 
				let time = formatDate(date, "yy-MM-dd hh:mm:ss");
				let sids = JSON.stringify(this.selectMall())
				uni.navigateTo({
					url:`./childShopping/submitOrder/SubmitOrder?sids=${sids}&time=${time}`
				})
			}
		}
	}
</script>

<style scoped>
	.ContentShopping{
		margin: 40rpx 40rpx;
	}
	.cs-item{
		display: flex;
		width: 100%;
		height: 168rpx;
		border: 1rpx solid #FFFFFF;
		margin-top: 40rpx;
	}
	.item-icon{
		width: 10%;
		line-height: 168rpx;
	}
	.item-img{
		width: 25%;
	}
	.item-desc{
		margin-left: 10rpx;
		width: 65%;
	}
	.item-img>image{
		width: 100%;
	}
	.item-name{
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 25rpx;
		display: flex;
		justify-content: space-between;
	}
	.item-type{
		color:#b7b8b8 ;
	}
	.item-enname{
		width: 100%;
		font-size: 25rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:  #b7b8b8;
		margin-top: 10rpx;
	}
	.item-price{
		font-size: 25rpx;
		color: #0C34BA;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.item-count{
		display: flex;
		justify-content: space-between;
		color: #303133;
		font-weight: normal;
		align-items: center;
	}
	.countBtn{
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #b7b8b8;
		border-radius: 50%;
		padding: 0rpx 30rpx 30rpx 10rpx;
		line-height: 40rpx;
		/* font-size: 50rpx; */
		background-color: #FFFFFF;
		transition: all 0.5s;
	}
	.countBtn:hover{
		background-color:#0c34ba ;
		color: #FFFFFF;
		transition: all 0.5s; 
	}
	.count-num{
		margin: 0rpx 40rpx 0rpx 40rpx;
	}
	.scroll-Y{
		position: absolute;
		top: 240rpx;
		bottom: 100rpx;
		left: 40rpx;
		right: 40rpx;
		width: 90%;
	}
	.to-bottom{
		text-align: center;
		color:  #b7b8b8;
		margin-top: 40rpx;
	}
	.bottom-shopping{
		height: 105rpx;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}
	.bottom-shoppingMsg{
		width: 58%;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		justify-content: space-between;
	}
	.bottom-item-icon{
		display: flex;
		align-items: center;
	}
	.all-sleect{
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.all-price{
		display: flex;
		align-items: center;
	}
	.all-price-num{
		color: #0C34BA;
		font-size: 50rpx;
		margin-bottom: 10rpx;
	}
</style>
